<template>
	<view @click.stop="handleShowPreview">
		<image v-if="imageCount<=1" :src="headerImage" mode="aspectFill" class="image"></image>
		<view v-else-if="showType==='list'" class="row image-list">
			<image v-for="(img, imgIndex) in imageUrls" :src="img" :key="imgIndex" mode="aspectFill" class="image"></image>
		</view>
		<uni-badge v-else class="uni-badge-left-margin" :text="imageCount" absolute="rightBottom" size="small">
			<image :src="headerImage" mode="aspectFill" class="image"></image>
		</uni-badge>
	</view>
</template>

<script>
	export default {
		name: 'PreviewImage',
		props: {
			imageUrls: {
				type: Array,
				default: ()=>[]
			},
			/** 图片显示类型：list（列表）、solo（显示第一个图片，默认此值） */
			showType: {
				type: String,
				default: 'solo',
				validator: function (value) {
					return ["list", "solo"].includes(value);
				},
			}
		},
		computed: {
			imageCount() {
				return this.imageUrls.length;
			},
			headerImage() {
				return this.imageUrls.length>0?this.imageUrls[0]:'';
			}
		},
		methods: {
			handleShowPreview(event) {
				uni.previewImage({
					urls: this.imageUrls,
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
				event.stopPropagation();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.image {
		width: $uni-img-size-base;
		height: $uni-img-size-base;
		border-radius: 5rpx;
	}
	.image-list {
		flex-wrap: wrap;
	}
</style>